<template>
    <div class="pt44">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div id="phone_panel" class="title_panel" style="display: none; opacity: 0; top: 32px;">
                    <div class="weui-cell_hd">
                        <label class="weui-label">手机号</label>
                    </div>
                </div>
                <div class="weui-cell__bd weui-cell_primary">
                    <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset">
                        <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input v-model="oldPhone" class="weui-input" pattern="[0-9]*" type="tel" maxlength="11" placeholder="原手机号"></div>
                    </div>
                </div>
                <div id="verifyBtn_box" class="weui-cell_ft">
                    <a id="verifyBtn" v-bind:class="{'weui-btn_plain-disabled':oldPhone.length!=11}" class="weui-btn weui-btn_plain-primary">获取验证码</a>
                </div>
            </div>
            <div class="weui-cell">
                <div id="verification_code_panel" class="title_panel">
                    <div class="weui-cell_hd">
                        <label class="weui-label">验证码</label>
                    </div>
                </div>
                <div class="weui-cell__bd weui-cell_primary">
                    <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input v-model="vcode" @input="checkSubimt" class="weui-input" type="number" pattern="[0-9]*" placeholder="验证码"></div></div>
                </div>
            </div>
            <div class="weui-cell">
                <div id="new-phone_panel" class="title_panel">
                    <div class="weui-cell_hd">
                        <label class="weui-label">新手机号</label>
                    </div>
                </div>
                <div class="weui-cell__bd weui-cell_primary">
                    <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset"><input v-model="newPhone" @input="checkSubimt" class="weui-input" type="tel" maxlength="11" pattern="[0-9]*" placeholder="新手机号"></div></div>
                </div>
            </div>
        </div>

        <div class="page__bd page__bd_spacing">
            <a @click="submitFunc" href="javascript:;" v-bind:class="{'weui-btn_disabled':noSubmit}" class="weui-btn weui-btn_primary">提交</a>
        </div>
    </div>
</template>

<script>
var tic = require("../components/titleInput.js");

export default  {
    name: 'ChangePhone',  // 组件名称
    data () {  // 数据
        return {
          msg: 'ChangePhone',
          oldPhone:"",
          newPhone:"",
          vcode:"",
          noSubmit:true
        }
    },
    methods:{ // 自定义方法，可对data进行处理
        checkSubimt(){
            if(this.oldPhone.length != 11 || this.newPhone.length != 11 || this.vcode == "") {
                this.noSubmit = true;
            }else{
                this.noSubmit = false;
            }
        },
        submitFunc(){
            if(this.noSubmit){
                return;
            }else{
                var cpParameter = {
                    oldphone:this.oldPhone,
                    contactPhone:this.newPhone,
                    verificationCode:this.vcode,
                    token:this.$store.state.token,
                    loginName:this.$store.state.loginName,
                    bizLicNo:this.$store.state.loginName,
                    openid:this.$store.state.openid,
                    loginType:"1"
                }
                var _this = this;
                $.post(ModifyPhone_URL,cpParameter,function(cpdata) {
                    console.dir(cpdata);

                    if (cpdata.lfq_merextrainfo_response && cpdata.lfq_merextrainfo_response.resp_code == "0000") {
                        _this.$store.state.errorMsg = "修改手机号成功,3秒后返回到设置页面";
                        setTimeout(function() {
                            location.hash = "#/userSetting";
                        }, 3000);
                    } else if (cpdata.lfq_merextrainfo_response && cpdata.lfq_merextrainfo_response.resp_code != "0000" && cpdata.lfq_merextrainfo_response.resp_msg) {
                        _this.$store.state.errorMsg = cpdata.lfq_merextrainfo_response.resp_msg;
                    } else if (cpdata.resp_msg) {
                        _this.$store.state.errorMsg = cpdata.resp_msg;
                    } else {
                        _this.$store.state.errorMsg = "修改手机号失败";
                    }
                });
            }
        }
    },
    mounted:function  () {
        tic.titileInputInit();
    }
}
</script>

<style lang='scss' scoped>
@import "../assets/scss/components/_panelweui-cell.scss";
.weui-cells.weui-cells_form {
    margin-top: 0;
}
</style>
